<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
		<style>
			html,body{height:100%;}
			#template{display: none;}
			#mask{
				position:fixed;
				background-color:rgba(0,0,0,.5);
				width: 100%;
				height:100%;
				top:0;
				left:0;
				display: none; 
			}
			#popup p{
				line-height:42px;
			}
			#popup{
				width:550px;
				padding:30px;
				background-color:#fff;
				border-radius:20px;
				position:fixed;
				top:50%;
				z-index:1;
				left:50%;
				transform:translate(-50%,-50%);
				display: none;
			}
	
			#close{
				position:absolute;
				top:5px;
				right:15px;
				color:#999;
				font-size: 24px;
				cursor:pointer;
				transition:all .5s;
			}
			#close:hover{
				transform: rotate(90deg);
			}
			
		</style>
	</head>
	<body>
		<div style="float:right;margin-right:15px;margin-top: 15px;">
			<button class="btn btn-primary" id="popupshow">+添加学生</button>
		</div>

		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>所在城市</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr id="template">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<button class="btn btn-danger delete" id="del">删除学员</button>
						<button class="btn btn-primary edit" id="xiu">修改信息</button>
					</td>
				</tr>
			</tbody>
		</table>



		<div id="popup">
			<span class="close"> × </span>
			<div class="form-group">
				<label for="newName">姓名</label>
				<input type="text" class="form-control" id="newName" placeholder="请输入学生姓名">
			</div>
			<div class="form-group">
				<label for="newAge">年龄</label>
				<input type="number" class="form-control" id="neweAge" placeholder="请输入学生年龄">
			</div>
			<div class="form-group">
				<label for="newCity">所在城市</label>
				<select name="" id="province"></select>
				<select name="" id="city"></select>
				<select name="" id="area"></select>
			</div>
			<div class="form-group">
				<label class="radio-inline">
					<input type="radio" name="sex" id="boy" value="option1"> 男
				</label>
				<label class="radio-inline">
					<input type="radio" name="sex" id="girl" value="option2" checked> 女
				</label>
			</div>
			<button class="btn btn-primary" id="send">确认添加</button>
			<button class="btn btn-default" id="cancel">取消</button>

		</div>

		<div id="mask">
		</div>
	</body>
</html>
<script src="jquery.min.js"></script>
<script src="citys.js"></script>
<script>
	let mask = $("#mask")
	let popup = $("#popup")
	let cancel = $("#cancel")
	let send = $("#send")
	let newName = $("#newName")
	let neweAge = $("#neweAge")
	let province = $("#province")
	let city = $("#city")
	let area = $("#area")

	citys.forEach(item => {
		let option = $(`<option>${item.provinceName}</option>`)
		province.append(option)
	})
	province.change(function() {
		// 先清空原来的数据
		city.empty();
		area.empty();
		// selectedIndex返回下拉选择菜单的当前选中的那个option的下标
		cityList = citys[this.selectedIndex].mallCityList
		// 更新市中的选择项
		cityList.forEach(item => {
			let option = $(`<option>${item.cityName}</option>`)
			city.append(option)
		})
		// 更新区中的选择项
		cityList[0].mallAreaList.forEach(item => {
			let option = $(`<option>${item.areaName}</option>`)
			area.append(option)
		})
	})
	city.change(function() {
		// 先清空原来的数据
		area.empty();
		let areaList = cityList[this.selectedIndex].mallAreaList;
		// 更新区中的选择项
		areaList.forEach(item => {
			let option = $(`<option>${item.areaName}</option>`)
			area.append(option)
		})
	})


	$("#popupshow").click(function() {
		mask.fadeIn()
		popup.fadeIn()

	})

	cancel.click(function() {
		mask.fadeOut()
		popup.fadeOut()


	})
	$("#close").click(function() {
		mask.fadeOut()
		popup.fadeOut()

	})
	$.ajax({
		url: "http://10.35.165.102:81/heihei",
		success(data) {
			console.log(data)
			var data = JSON.parse(data);
			data.forEach(item => {
				let newItem = $("#template").clone(true)
				newItem.appendTo($(".table tbody")).attr("id", "");
				newItem.find("td").eq(0).html(item.id);
				newItem.find("td").eq(1).html(item.name)
				newItem.find("td").eq(2).html(item.sex ? "男" : "女")
				newItem.find("td").eq(3).html(item.age)
				newItem.find("td").eq(4).html(item.city)
			})
		}
	})

	send.click(function() {
		$.ajax({
			url: "http://10.35.165.102:81/nana",
			data: {
				name: newName.val(),
				age: neweAge.val(),
				city: province.val() + city.val() + area.val(),
				sex: $("#boy")[0].checked ? 1 : 0,
			},
			success(data) {
				if (data === "success") {
					alert("添加成功")
					history.go(0)

				} else {
					alert("添加失败")
				}
			}
		})
	})


	// $("#xiu").click(function() {
	// 	mask.fadeIn()

	// })

	// $("#xiugai").click(function() {
	// 	$.ajax({
	// 		url: "http://10.35.165.102:81/xiugai",
	// 		data: {
	// 			id: $(this).closest("tr").find("td").eq(0).html(),
	// 			name: newName.val(),
	// 			age: neweAge.val(),
	// 			city: province.val() + city.val() + area.val(),
	// 			sex: $("#boy")[0].checked ? 1 : 0,
	// 		},
	// 		success(data) {
	// 			if (data === success) {
	// 				alert("修改成功")
	// 			} else {
	// 				alert("修改失败")
	// 			}
	// 		}
	// 	})

	// })

	$("#del").click(function() {
		if (confirm("真的要删吗")) {
			$.ajax({
				url: "http://10.35.165.102:81/del",
				data: {
					id: $(this).closest("tr").find("td").eq(0).html(),
				},
				success(data) {
					if (data === "success") {
						history.go(0)
					} else {
						alert("删除失败")
					}
				}
			})
		}
	})
</script>
